<template>
  <div style="padding: 15px;">
    <el-form label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="差异单号">
              <el-input disabled v-model="moveInfoDetail.code" style="width:75%" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="来源单号" prop="countingCode">
              <el-input disabled v-model="moveInfoDetail.countingCode" style="width:75%" />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库">
              <el-input disabled v-model="moveInfoDetail.warehouseName" style="width:75%" />
            </el-form-item>


          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="300"
      :loading="loading"
      :data="tableData"
    >
      <template v-slot:empty>
        <p> </p>
      </template>
      <vxe-table-column type="index" width="60" fixed="left" />
      <vxe-table-column field="shipmentName" title="入驻商" min-width="100" />
      <vxe-table-column field="goodsName" title="商品名称" min-width="200" />
      <vxe-table-column field="goodCode" title="商品编码" min-width="200"/>
      <vxe-table-column field="goodsBarCode" title="商品条码" min-width="200" />
      <vxe-table-column field="type" title="差异类型" min-width="100" :formatter="formatterType"/>
      <vxe-table-column field="goodsUnitName" title="单位" min-width="100"/>
      <vxe-table-column field="differenceQuantity" title="差异数量" min-width="100" />
    </vxe-table>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="300"
      :loading="loading"
      :data="tableData"
    >
      <template v-slot:empty>
        <p> </p>
      </template>
      <vxe-table-column type="index" width="60" fixed="left" />
      <vxe-table-column field="warehouseSpaceName" title="库区" min-width="100" />
      <vxe-table-column field="locationName" title="库位" min-width="100"/>
      <vxe-table-column field="goodsUnitName" title="单位" min-width="100"/>
      <vxe-table-column field="inventoryQuantity" title="库存数量" min-width="100" />
      <vxe-table-column field="quantity" title="盘点数量" min-width="100" />
      <vxe-table-column field="differenceQuantity" title="差异数量" min-width="100" />

      <vxe-table-column field="gmtManufacture" title="生产日期" min-width="150" />
      <vxe-table-column field="receiveLot" title="收货批次" min-width="100" />
      <vxe-table-column field="goodsStatusName" title="库存状态" min-width="100" />
      <vxe-table-column field="isLock" title="锁定状态" min-width="100" :formatter="formatterLock" />
    </vxe-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>

  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import { getWarehouse } from '@/api/basicInfo'
  import { differenceDetail } from '@/api/store'

  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
  export default {
  name: "moveDetail",
  components: {},
  data() {
    return {
      message: "",
      loading: false,
      allAlign: "center",
      tableData: [],
      code: "",
      // 移库单信息
      moveInfoDetail: {
        code: "",
        remark: "",
        countingCode:'',
        warehouseCode: "",
        warehouseName: "",
      },
      itemListQuery: {
        moveCode: this.code, //移位单号 ,
        pageNum: 1,
        pageSize: 10,
        sortField: "",
        sortType: "",
      },
      warehouseList: [],
      locationList: [],
    };
  },
  created() {
    this.code = this.$route.query.code;

    this.findWarehouseList();

    this.findMoveDetail();
    /*this.findMoveItemList();*/
  },
  methods: {
        // 返回
    funcSubmitCheck() {
      this.$eventBus.$emit('refreshList')
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/kngl/differenceList"
      });
    },
      formatterStatus({ cellValue, row }) {
        row.inventoryCode = row.code;
        if (row.status === '0') {
          return '合格'
        } else if (row.status === '1') {
          return '不合格'
        }
      },
      formatterType({ cellValue}) {
        if (cellValue == '0') {
          return '盘盈'
        } else if (cellValue == '1') {
          return '盘亏'
        }
      },
      formatterLock({ cellValue, row }) {
        row.lock = row.lockName;
        if (cellValue == '0') {
          return '否'
        } else if (cellValue == '1') {
          return '是'
        }
      },


    // 获取移位单主表
    findMoveDetail() {
      differenceDetail(this.code).then((response) => {
        this.moveInfoDetail = response.data;
        this.tableData = response.data.differenceItemList
      });
    },

    findWarehouseList(){
      getWarehouse().then((response)=>{
        this.warehouseList = response.data;
      })
    },

    // 设置底部合计
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "合计";
          }
          if (["moveQuantity", "moveQuantity"].includes(column.property)) {
            return XEUtils.sum(data, column.property);
          }
          return null;
        }),
      ];
    },


  },
};
</script>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis),
.vxe-table .vxe-footer--column:not(.col--ellipsis),
.vxe-table .vxe-header--column:not(.col--ellipsis) {
  padding: 6px 0;
}
.vxe-toolbar {
  padding: 0 0 10px 0;
}
</style>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 75px auto;
    width: 175px;
    // float: right;
  }
</style>
